<template>
  <div class="lang">

    <!-- <svg-icon icon-class="user" /> -->
    <el-dropdown @command="handleCommand">
      <span class="el-dropdown-link">
        <i class="el-icon-cold-drink" />
      </span>
      <el-dropdown-menu slot="dropdown">
        <el-dropdown-item command="zh">中文zh</el-dropdown-item>
        <el-dropdown-item command="en">英文en</el-dropdown-item>
      </el-dropdown-menu>
    </el-dropdown>
  </div>
</template>
<script>
export default {
  name: '',
  data() {
    return {}
  },
  methods: {
    handleCommand(lang) {
      this.$i18n.locale = lang
      this.$message('click on item ' + lang)
      console.log(this.$i18n.locale)
    }
  }
}
</script>

<style lang="scss" scoped>
.lang {
  // inline 行内元素- ---- 不能设置宽高
  // inline-block 行内块元素  --- 可以设置， 效果又不是占一整行
  // block  块级元素
  display: inline-block;
  font-size: 22px;
  color: #a2ed08;
  margin-right: 15px;
  // 样式会有继承， 然后样式也是 就近原则
  .el-dropdown {
    color: #a2ed08;
    .el-dropdown-link {
      color: #a2ed08;
    }
  }
}
.el-dropdown-link {
    cursor: pointer;
    color: #409EFF;
  }
  .el-icon-arrow-down {
    font-size: 12px;
  }
</style>
